<template>
  <herin-container title="井下车辆信息" :delay="2">
    <template #content>
      <div class="personnel-monitoring">
        <!-- 车辆统计 -->
        <div class="car-statistics">
          <div class="statistics-img-box"><img src="@/assets/img/dispath/car.png" class="statistics-img"><div class="statistics-text">当前井下车辆统计</div></div>
          <div><span class="statistics-num">{{cartCount}}</span><span style="color:#838383">辆</span></div>
        </div>
        <!-- 分析 -->
        <div class="anaiyse-person">
          <div class="anaiyse-person1">
            <div>
              <div v-if='index'>井下车辆类型分析</div>
              <div v-else>近24小时车辆类型分析</div>
          </div>
          <div class="buttonbox">
            <div
              v-for="(item,index) in tabList"
              :key="index"
              :class="{'active':activeIndex === index}"
              style="cursor:pointer"
              @click="changeView(index)">{{item}}</div>
          </div>
          </div>
          <div class="anaiyse-chert">
            <AnalyseLine v-if="tabList[activeIndex] === '趋势'" :analyseLinedata="analyseLinedata"></AnalyseLine>
            <CarType v-else :roseList="roseList"></CarType>
          </div>
        </div>

        <!-- 人员列表 -->
        <div class="underground-personnel">
          <div class="personnel-title">
            <div>车辆列表</div>
          </div>

          <div class="search-wrap">
            <HerinSelect
              v-model="selectType"
              class="herin-select"
              :options="selectOption"
              place-holder=""
              :height="28"
              :width="130"
              :showOptionscount="4"
              @HerinSelectChange="handleSelectChange"
            />
            <div class="input-box">
              <input v-model="searchInput" type="text" placeholder="搜索...">
              <i v-show="searchInput" class="el-icon el-icon-close" @click="clearInput" />
              <i class="el-icon el-icon-search" @click="handleSearch" />
            </div>
          </div>

          <div class="list-content">
              <div class="personnel-list">
                <template v-if="cartLists.length>0">
                  <div
                    v-for="(it, ii) in cartLists"
                    :key="ii"
                    :class="{ item: true, active: activeId === it.id}"
                  >
                    <div class="row">
                      <div class="name-type">
                        <span class="tag-button" :style="{'background-color': colorBg(it.carType).bg,'color':colorBg(it.carType).color}">{{ it.carType }}</span>
                        <span class="name">{{ it.carCode }}</span>
                      </div>
                      <div class="long">
                        <span :class="{alarm: it.alarmState}">{{ it.speed }}</span>
                        <span>&nbsp;km/h</span>
                      </div>
                    </div>
                    <div class="row last">
                      <div class="addr">
                        <img src="@/assets/img/dispath/addr.png">
                        <span class="station-name">{{ it.location }}</span>
                      </div>
                      <div>{{ it.downholeTime }}</div>
                    </div>
                  </div>
                </template>
                <div v-else class="isCommonLists" style="padding-top:1.25rem;">暂无数据</div>
              </div>
          </div>
        </div>
      </div>
    </template>
  </herin-container>
</template>

<script>
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import HerinContainer from '@/components/HerinContainer.vue';
import AnalyseLine from '@/views/dispatch/common/analyseLine.vue';
import CarType from '@/views/dispatch/common/car.vue';

import { getUnderCarCount, getUnderCarTrendInfo, getUnderCarTypeInfo, getCarType, queryCarsInfo } from '@/api/item/dispatch/index';
import { xFormat } from '@/utils/date';

export default {

  components: {
    HerinContainer,
    AnalyseLine,
    CarType,
    HerinSelect
  },

  data() {
    return {
      activeIndex: 0,
      index: 0,
      tabList: ['趋势', '类型'],
      showTipType: 'empty',
      searchInput: '',
      selectType: '全部车辆',
      selectOption: [{ label: '全部车辆', value: '全部车辆' }],
      cartCount: '',
      analyseLinedata: [],
      roseList: [],
      cartLists: [],
      actionLoopTimer3S: null,
      actionLoopTimer1H: null
    };
  },

  computed: {
    activeId() {
      return this.$store.state.dispath.dispathState;
    },
    colorBg() {
      return function(type) {
        const colorInfo = {};
        switch (type) {
          case '人车':
            colorInfo['color'] = '#34C8FF';
            colorInfo['bg'] = 'rgba(52, 200, 255, 0.3)';
            break;
          case '工程车':
            colorInfo['color'] = '#00FDFF';
            colorInfo['bg'] = 'rgba(0, 253, 255, 0.3)';
            break;
          case 'DBT':
            colorInfo['color'] = '#57FFAA';
            colorInfo['bg'] = 'rgb(87, 255, 170, 0.3)';
            break;
          case '管道车':
            colorInfo['color'] = '#FFD101';
            colorInfo['bg'] = 'rgb(255, 209, 1, 0.3)';
            break;
        }
        return colorInfo;
      };
    }
  },

  mounted() {
    this.startActionLoop3S(this.all3SFun);
    this.startActionLoop1H(this.getUnderCarTrendInfo);
  },

  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },

  methods: {
    all3SFun() {
      this.getUnderCarCount();
      this.queryCarsInfo();
      this.getCarType();
      if (this.tabList[this.activeIndex] === '类型') {
        this.getUnderCarTypeInfo();
      }
    },
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1小时 循环查询
    startActionLoop1H(callback) {
      callback();
      // 3600000
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    // 获取井下实时车辆数量
    async getUnderCarCount() {
      const res = await getUnderCarCount();
      if (res.data.code === 200) {
        this.cartCount = res.data.data.count;
      }
    },

    // 获取近24小时车辆趋势分析
    async getUnderCarTrendInfo() {
      const res = await getUnderCarTrendInfo();
      if (res.data.code === 200) {
        this.analyseLinedata = res.data.data.map(item => {
          return {
            x: xFormat(item.x),
            y: item.y * 1,
            s: item.s
          };
        });
      }
    },

    // 获取井下车辆类型统计信息
    async getUnderCarTypeInfo() {
      const res = await getUnderCarTypeInfo();
      if (res.data.code === 200) {
        this.roseList = res.data.data.map(item => {
          return {
            x: item.carType,
            y: item.carNum * 1
          };
        });
      }
    },

    // 获取车辆列表下拉类型
    async getCarType() {
      const res = await getCarType();
      if (res.data.code === 200) {
        const list = res.data.data.map(item => {
          return { label: item, value: item };
        });
        this.selectOption = [...[{ label: '全部车辆', value: '全部车辆' }], ...list];
      }
    },

    changeView(index) {
      this.activeIndex = index;
      this.index = index;
      if (this.tabList[this.activeIndex] === '趋势') {
        this.getUnderCarTrendInfo();
      } else {
        this.getUnderCarTypeInfo();
      }
    },
    // 获取车辆列表信息
    async queryCarsInfo() {
      const params = {
        carType: this.selectType === '全部车辆' ? '' : this.selectType,
        keyword: this.searchInput
      };
      this.showTipType = 'search';

      const res = await queryCarsInfo(params);
      if (res.data.code === 200) {
        this.cartLists = res.data.data;
      }
    },

    clearInput() {
      this.searchInput = '';
      this.queryCarsInfo();
    },

    handleSelectChange() {
      this.queryCarsInfo();
    },

    handleSearch() {
      this.queryCarsInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.herin-container{
  margin-top: .625rem;
  position: relative;
  .car-statistics{
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right:.625rem;
    font-size: 0.875rem !important;
    border-radius: .25rem;
    padding:0 .625rem;
    background-color: rgba(255, 255, 255, 0.1);
    .statistics-img-box{
      display: flex;
      align-items: center;
    }
    }
  .statistics-text{
    color: #F8F8F8;
  }
  .statistics-num{
    font-size: 1rem !important;
    color: #00FDFF;
    margin-right: .3125rem;
  }
  .statistics-img{
    margin-right: .3125rem;
  }

  .anaiyse-person{
    .anaiyse-person1{
    display: flex;
    justify-content: space-between;
    margin-top: .625rem;
    font-size: .75rem;
    color: #ADADAD;
    }
    .buttonbox{
      display: flex;
      align-items: center;
      div{
        font-size: .75rem;
        color: rgba(255, 255, 255, 100);
        margin:0 .1875rem;
        padding: 0 .3125rem;
        width: 2.125rem;
        text-align: center;
        height: 1rem;
        line-height: 1rem !important;
        background: rgba(232, 232, 232, 0.2);
      }
      .active{
        color: #02E4FF;
        background-color: rgba(2, 228, 255, 0.2);
      }
    }
  }

  // underground-personnel
  .underground-personnel{
    margin-top: .0625rem;
      .personnel-title{
        display: flex;
        justify-content: space-between;
        font-size: $auxiliaryText;
        color:$light2Grey;
        height: 0.875rem;
        line-height: 0.875rem;
        .num{
          color: $lightGrey;
        }
      }
      .search-wrap{
        display: flex;
        justify-content: space-between;
        margin-top: 0.625rem;
        .input-box{
          width: 11.875rem;
          height: 1.75rem;
          border: .0625rem solid rgba($color: #FFFFFF, $alpha: 0.2);
          border-radius: 0.25rem;
          position: relative;
          text-align: left;
          box-sizing: border-box;
          input{
            width: 72%;
            height: 100%;
            margin: 0 0.625rem;
            border: none;
            font-size: 0.75rem;
            color: rgba($color:$white, $alpha: 0.9);
            background-color: transparent;
            outline-width: 0rem;
          }
          input::-webkit-input-placeholder{
            font-size: 0.75rem;
            color: $secondaryTextColor;
          }
          .el-icon{
            display: inline-block;
            width: 0.875rem;
            height: 0.875rem;
            line-height: 0.875rem;
            font-size: 0.75rem;
            cursor: pointer;
            color: rgba($color: $white, $alpha: 0.5);
            position: absolute;
            top: 0.4375rem;
            &-close{
              right: 1.375rem;
            }
            &-search{
              right: .25rem;
              font-size: .75rem;
            }
          }
        }
      }
      .list-content{
        position: relative;
        .personnel-list{
          width: calc(100% + 10px);
          padding-right: 0.4375rem;
          height: 7.5rem;
          overflow: auto;
          // margin-top: 0.625rem;
          .item{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 3.75rem;
            padding: 0.625rem 0.625rem 0.625rem 0;
            border-bottom: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.1);
            div{
              cursor: pointer;
            }
            &.active{
              background-color: $itemActiveBg;
            }
            &:hover{
              background-color: $itemActiveBg;
            }
            .row{
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: $auxiliaryText;
              height: 0.875rem;
              line-height: 0.875rem;
              .name-type{
                .name{
                  color: $light3Grey;
                  font-size: $commonContentText;
                  margin-left: 0.625rem;
                }
                .tag-button{
                  @include tag-btn();
                }
              }
              .long{
                color: $lightGrey;
                &.alarm{ color: $red; }
              }
              .addr{
                img{
                  width: 0.75rem;
                  height: 0.75rem;
                  margin-right: 0.25rem;
                  vertical-align: bottom;
                }
              }
              &.last{ color: $lightGrey; .station-name {
                  width: 11.125rem;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  display: inline-block;
                  white-space: nowrap;
                } }
            }
          }
        }
      }
  }
}
.anaiyse-chert{
  height: 8.5625rem;
  padding-top: .625rem;
}
</style>
